<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/lib/datatables/1.10.21/datatables.min.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="/admin/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title></title>
</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计分析 <span class="c-gray en">&gt;</span>
    按日期统计
    <a class="btn btn-primary radius r" style="line-height:1.6em;margin-top:3px"
       href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
    <a href="" class="btn btn-primary radius" id="toExcel" download="日期统计表">导出excel</a>
    <form action="/{{config('constant.name_admin')}}/statistics/statisticsByDate" method="post">
        <div class="text-c">
            {{ csrf_form_field() }}
            <a class="btn btn-success-outline radius mr-30" onclick="checkBatch()">指定查询批次</a>
            <input type="hidden" name="batchs" value="{{$rbatchs}}">
            日期范围：
            <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })"
                   name="date_start" id="datemin"
                   class="input-text Wdate" style="width:120px;" value="{{$date_start}}">
            -
            <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })"
                   id="datemax"
                   name="date_end" class="input-text Wdate" style="width:120px;" value="{{$date_end}}">

            @csrf

            <button type="submit" class="btn btn-success radius">
                <i class="Hui-iconfont">&#xe665;</i> 查询
            </button>
        </div>
    </form>
    <div class="mt-20">
        <table class="table table-border table-bordered table-hover table-bg table-responsive" id="datatable">
            <thead>
            <tr>
                <th scope="col" colspan="5">日期范围：{{$date_start}} 至 {{$date_end}}</th>
            </tr>
            <tr>
                <th scope="col" colspan="5">查询批次：<span id="search-batch">{{$rbatchs === '' ? '全部' : $rbatchs}}</span></th>
            </tr>
            <tr class="text-c">
                <th>试品名称</th>
                <th>试验数量</th>
                <th>不合格数量</th>
                <th>合格率</th>
                <th>不合格项目统计</th>
            </tr>
            </thead>
            <tbody>
            @if ($count == 0)
                <tr class="text-c">
                    <td colspan="4" style="text-align: left;">记录为空</td>
                </tr>
            @else
                @foreach ($data as $val)
                    <tr class="text-c">
                        <td>{{ $val->tool_name }}</td>
                        <td>{{ $val->total }}</td>
                        <td>{{ $val->unpassed }}</td>
                        <td>{{ $val->lv }} %</td>
                        <td>{{ isset($ret0Data[$val->tool_name]) ? $ret0Data[$val->tool_name] : '-' }}</td>
                    </tr>
                @endforeach
            @endif
            </tbody>
        </table>
    </div>
    <div class="mt-30">
        {{-- 为ECharts准备一个具备大小（宽高）的Dom --}}
        {{-- 46px 一个 --}}
        <div id="echarts" style="width: auto;height:{{$count*40 + 60}}px;"></div>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/admin/lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script src="/admin/lib/echarts/echarts-bar.min.js"></script>
<script type="text/javascript" src="/admin/lib/datatables/1.10.21/datatables.min.js"></script>
<script type="text/javascript" src="/admin/static/myfolder/js/statistics/common.js?ver={{config('constant.static_res_ver')}}"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    $('#datatable').DataTable({
        fixedHeader: true,
        ordering: false, // 是否排序
        paging: false, //禁用分页
        searching: false,
        info: false,
    });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis',
            // formatter:'{b}<br>{a0}：{c0}<br>{a1}：{c1}',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['试验总量', '不合格数量'],
            itemGap: 70,
            textStyle: {
                fontSize: 16
            },
            top: 20
        },
        color: [
            '#3398DB', '#c23531', '#2f4554', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
        ],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            type: 'category',
            show: true,
            inverse: true,//是否是反向坐标轴
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                fontSize: 16,
                color: '#1A73E8',
                fontWeight: 'bold'
            },
            data: []
        },
        series: [
            {
                name: '试验总量',
                type: 'bar',
                legendHoverLink: false,//是否启用图例 hover 时的联动高亮
                roundCap: 30,
                // stack: '总量',
                barWidth: 30,//柱图宽度
                // barGap : '-30%',
                label: {
                    show: true,
                    fontSize: 16,
                    position: 'right'
                },
                itemStyle: {
                    barBorderRadius: [0, 15, 15, 0]//圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
                },
                data: []
            },
            {
                name: '不合格数量',
                type: 'bar',
                legendHoverLink: false,//是否启用图例 hover 时的联动高亮
                // stack: '总量',
                barWidth: 26,//柱图宽度
                barGap: '-94%',
                // barMaxWidth: 30,
                // barMinWidth: 30,
                // barCategoryGap : '1%',
                label: {
                    show: true,
                    fontSize: 16,
                    textBorderColor: '#fff',
                    textBorderWidth: 2,
                    position: 'right'
                },
                itemStyle: {
                    barBorderRadius: [0, 15, 15, 0] //（顺时针左上，右上，右下，左下）//圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
                },
                data: []
            },
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    myChart.showLoading();

    // setInterval(fun,3000);
    fun();

    function fun() {
        var date_start = $("input[name='date_start']").val();
        var date_end = $("input[name='date_end']").val();
        var url = '/{{config('constant.name_admin')}}/statistics/statisticsByDateAjax/' + date_start + '/' + date_end + '?batchs=' + $('input[name=batchs]').val();
        // 异步加载数据
        $.get(url).done(function (data) {
            myChart.hideLoading();
            // 填入数据
            myChart.setOption({
                yAxis: {
                    data: data.tool_name
                },
                series: [
                    {
                        // 根据名字对应到相应的系列
                        name: '试验总量',
                        data: data.total
                    },
                    {
                        // 根据名字对应到相应的系列
                        name: '不合格数量',
                        data: data.unpassed
                    },
                ]
            });
        });
    }

    window.addEventListener("resize", function () {
        myChart.resize();
    });

    function checkBatch() {
            @php
                $batchNums = DB::table('a_contract as a')->leftJoin('a_status_time as b','b.contract_id','=','a.id')
                            ->where('a.is_del',0)->whereBetween('b.test_start',[$date_start,$date_end])->orderBy('a.batchNum','desc')->select('a.client_name','a.batchNum')->get();
            @endphp
        let data = @json($batchNums),
            content = '' +
                '<div class="mt-10 mb-10">' +
                '   <a class="btn btn-primary radius size-S ml-10" onclick="syncBatch(this)">同步当前查询批次</a>' +
                '   <table class="table table-border table-bordered table-hover  table-bg table-responsive">' +
                '       <div class="skin-minimal">';
        for (index in data) {
            let batch = data[index].batchNum, client_name = data[index].client_name;
            if (index % 2 === 0) {
                content += '<tr> ' +
                    '           <td>' +
                    '               <div class="check-box">' +
                    '                  <input type="checkbox" onchange="chageBatch(this)" value="' + batch + '" id="checkbox-' + index + '">' +
                    '                   <label for="checkbox-' + index + '">' + batch + '（' + client_name + '）' + '</label>' +
                    '               </div>' +
                    '           </td>';
            }
            else {
                content += '    <td>' +
                    '               <div class="check-box">' +
                    '                   <input type="checkbox" onchange="chageBatch(this)" value="' + batch + '" id="checkbox-' + index + '">' +
                    '                   <label for="checkbox-' + index + '">' + batch + '（' + client_name + '）' + '</label>' +
                    '               </div>' +
                    '           </td> ' +
                    '       </tr>';
            }
        }
        content += '    </div> ' +
            '    </table> ' +
            '</div>';
        layer.open({
            type: 1,
            area: ['600px', '600px'],
            shade: 0.4,
            title: '指定查询批次',
            content: content,
        });

    }

    function syncBatch(obj) {
        let data = @json($batchNums),
            noWBatchs = $('input[name=batchs]').val();
        for (index in data) {
            let batch = data[index].batchNum;
            if (noWBatchs.indexOf(batch) != -1) {
                $('#checkbox-' + index).trigger('click');
            }
        }
        $(obj).addClass('hidden');
    }

    function chageBatch(obj) {
        if ($(obj).hasClass('batch_checked')) {
            $(obj).removeClass('batch_checked');
        }
        else {
            $(obj).addClass('batch_checked');
        }
        let text = '';
        $('.batch_checked').each(function () {
            text += '，' + $(this).val();
        })
        text = text.substring(1);
        // text = text === '' ? '全部' : text;
        $('#search-batch').text(text);
        $('input[name=batchs]').val(text);
    }
</script>
</body>
</html>
